<template>
  <div
    class="infobox2"
    :style="{ background: jsonData[0].pageColor }"
    @mouseenter="handleMouseenter"
    @mouseleave="handleMouseleave"
  >
    <div class="setting" @click="setPage({ name: 'page' })">
      <i class="el-icon-setting"></i>
    </div>

    <div class="saveBtn">
      <el-button size="small" type="primary" @click="save">保存页面</el-button>
      <div style="margin-top: 15px">
        <el-button size="small" type="primary" @click="PreviewI"
          >在线预览</el-button
        >
      </div>
    </div>
    <!-- <div
      class="saveBtn"
      @click="remove"
      style="top: 100px"
      v-if="$store.state.menuIndex"
    >
      <el-button size="small" type="danger">删除组件</el-button>
    </div> -->
    <div class="block1" @mouseenter.stop="block1HandleMouseenter">
      <div v-if="jsonData[0].type == 1">
        <div
          class="info1"
          :style="{
            background: `${jsonData[0].bgType == 1 ? jsonData[0].bgColor : ''}`,
            backgroundImage: `url(${
              jsonData[0].bgType == 2 ? jsonData[0].bgImg.img : ''
            })`,
            backgroundSize: `${jsonData[0].bgType == 2 ? 'cover' : ''}`,
            backgroundPosition: `${jsonData[0].bgType == 2 ? '50%' : ''}`,
            backgroundRepeat: `${jsonData[0].bgType == 2 ? 'no-repeat' : ''}`,
          }"
        >
          <img :src="require('@/assets/topNavBlack.png')" alt="" />
        </div>
        <div
          v-if="jsonData[0].titleType == 1"
          :class="
            jsonData[0].titlePin.type == 1
              ? 'info2 flex aitems'
              : 'info2 flex aitems jcenter'
          "
          :style="{
            color: jsonData[0].color,
          }"
        >
          <img
            :src="jsonData[0].titleText.logo"
            alt=""
            v-if="jsonData[0].titleText.logo"
          />
          {{ jsonData[0].titleText.text }}
        </div>
        <div
          v-if="jsonData[0].titleType == 2"
          class="info3"
          :style="{
            color: jsonData[0].color,
            left: `${jsonData[0].titlePin.type == 1 ? '15px' : ''}`,
            margin: `${jsonData[0].titlePin.type == 1 ? '0' : ''}`,
          }"
        >
          <img
            :src="jsonData[0].titleImg.img"
            v-if="jsonData[0].titleImg.img"
            alt=""
          />
        </div>
      </div>
      <div v-if="jsonData[0].type == 2">
        <div
          class="info1"
          :style="{
            background: `${jsonData[0].bgType == 1 ? jsonData[0].bgColor : ''}`,
            backgroundImage: `url(${
              jsonData[0].bgType == 2 ? jsonData[0].bgImg.img : ''
            })`,
            backgroundSize: `${jsonData[0].bgType == 2 ? 'cover' : ''}`,
            backgroundPosition: `${jsonData[0].bgType == 2 ? '50%' : ''}`,
            backgroundRepeat: `${jsonData[0].bgType == 2 ? 'no-repeat' : ''}`,
          }"
        >
          <img :src="require('@/assets/topNavBlack.png')" alt="" />
        </div>
        <div
          :class="'info4 flex aitems'"
          :style="{
            color: jsonData[0].color,
          }"
        >
          <div
            v-if="jsonData[0].titleType == 1"
            class="ellipsis1"
            style="max-width: 70px"
          >
            {{ jsonData[0].titleText.text }}
          </div>
          <div v-if="jsonData[0].titleType == 2">
            <img
              :src="jsonData[0].titleImg.img"
              style="width: 30px; height: 30px"
              alt=""
            />
          </div>
          <div class="search flex aitems">
            <i class="el-icon-search" style="margin-left: 10px"></i>
            <div class="searchvalue">{{ jsonData[0].search.value }}</div>
          </div>
        </div>
      </div>
      <div v-if="jsonData[0].type == 3">
        <div class="info5">
          <div
            :style="{
              backgroundImage: `url(${jsonData[0].platformLogo.img})`,
            }"
            class="filter"
          >
            <div class="gaosi-content"></div>
          </div>
          <div class="topNavBlack" style="height: 88px">
            <img :src="require('@/assets/topNavBlack.png')" alt="" />
          </div>
          <div class="tipbox1">
            <img
              :src="jsonData[0].platformLogo.img"
              v-if="jsonData[0].platformLogo.img"
              class="platformLogo"
              alt=""
            />
            <div class="tip1">{{ jsonData[0].platformName.value }}</div>
            <div class="tip2">{{ jsonData[0].platformDesc.value }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="borderPon" ref="borderPon"></div>

    <!-- 搜索 start -->

    <div
      class="blockmain"
      :style="{
        height: `${
          jsonData[0].type == 4
            ? '100%'
            : jsonData[0].type == 3
            ? 'calc(100% - 220px)'
            : ''
        }`,
      }"
    >
      <!-- <div v-for="item in 100">{{ item }}</div> -->
      <!-- <draggable
        v-model="jsonData"
        chosen-class="chosen"
        force-fallback="true"
        group="people"
        animation="100"
      >
        <transition-group> -->
      <!-- {{ jsonData }} -->
      <div
        class=""
        v-for="(item, index, key) in jsonData"
        :key="index"
        style="position: relative"
      >
        <!-- <div
          v-if="item.isSetting && index !== 0"
          class="delBtn flex aitems jcenter"
          @click.stop="handleDelCom(index)"
        >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </div> -->

        <div
          v-if="item.isSetting"
          class="borderLeft"
          style="
            width: 4px;
            left: 0;
            bottom: 0;
            top: 0;
            position: absolute;
            background: #409eff;
            z-index: 99;
          "
        ></div>
        <div
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          class="block2"
          v-if="item.name == '搜索'"
          :style="{
            background: item.bg.color,
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div
            :style="{
              borderRadius: item.style.type == 'plain' ? '4px' : '',
              background: item.style.color,
            }"
            :class="
              'info1 flex aitems ' +
              (item.align.value == 'center'
                ? 'jcenter'
                : item.align.value == 'right'
                ? 'jend'
                : '')
            "
          >
            <div class="icon">
              <i class="el-icon-search"></i>
            </div>
            <div class="input">{{ item.placeholder.text }}</div>
          </div>
        </div>
        <div
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          class="block3"
          v-if="item.name == '文本'"
          :style="{
            textAlign: `${item.align.value}`,
            background: item.style.bgColor,
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info1"
            :style="{
              fontWeight: `${item.style.isBold ? 'bold' : ''}`,
              fontSize: `${item.style.size}px`,
              color: `${item.style.color}`,
            }"
          >
            <span v-html="item.content.text"></span>
          </div>
        </div>
        <div
          class="block4"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '标题栏' && item.type.value == 1"
          :style="{
            textAlign: `${item.align.value}`,
            background: item.style.bgColor,
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info1"
            :style="{
              fontWeight: `${item.style.isBold ? 'bold' : ''}`,
              fontSize: `${item.style.size}px`,
              color: `${item.style.color}`,
            }"
          >
            {{ item.input.text }}
          </div>
        </div>
        <div
          class="block4 flex aitems sb"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '标题栏' && item.type.value == 2"
          :style="{
            textAlign: `${item.align.value}`,
            background: item.style.bgColor,
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info1"
            :style="{
              fontWeight: `${item.style.isBold ? 'bold' : ''}`,
              fontSize: `${item.style.size}px`,
              color: `${item.style.color}`,
            }"
          >
            {{ item.input.text }}
          </div>
          <div
            v-if="item.types.value == 1"
            :style="{ color: item.types.color }"
          >
            <i class="el-icon-arrow-right"></i>
          </div>
          <div
            v-if="item.types.value == 2"
            class="info2"
            :style="{ color: item.types.color }"
          >
            {{ item.types.text }}
          </div>
        </div>
        <div
          class="block5"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '图片'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div
            class="hot"
            v-for="(hot, indexs, keys) in item.hotData"
            :style="{
              width: `${hot.w}px`,
              height: `${hot.h}px`,
              left: `${hot.x}px`,
              top: `${hot.y}px`,
            }"
          >
            <div>{{ hot.name }}</div>
          </div>
          <div
            class="info1"
            v-if="item.value.length == 0 && item.type.value == 1"
          >
            <img src="@/assets/zanwutupian.png" alt="" />
          </div>
          <div
            class="info1 flex aitems sb"
            v-if="item.value.length == 0 && item.type.value == 2"
          >
            <img
              src="@/assets/zanwutupian.png"
              :style="{
                borderRadius: item.style.type == 'round' ? '10px' : '',
                width: `calc(50% - ${item.style.imgM / 2}px)`,
              }"
              alt=""
            />
            <img
              src="@/assets/zanwutupian.png"
              :style="{
                borderRadius: item.style.type == 'round' ? '10px' : '',
                width: `calc(50% - ${item.style.imgM / 2}px)`,
              }"
              alt=""
            />
          </div>
          <div
            class="info1"
            style="overflow-x: scroll; white-space: nowrap"
            v-if="item.value.length == 0 && item.type.value == 3"
          >
            <img
              src="@/assets/zanwutupian.png"
              :style="{
                borderRadius: item.style.type == 'round' ? '10px' : '',
                width: `230px`,
                display: 'inline-block',
              }"
              alt=""
            />
            <img
              src="@/assets/zanwutupian.png"
              :style="{
                borderRadius: item.style.type == 'round' ? '10px' : '',
                width: `230px`,
                display: 'inline-block',
              }"
              alt=""
            />
          </div>
          <div
            class="info1"
            v-for="i in item.value"
            v-if="item.type.value == 1"
          >
            <img
              :src="i.link"
              alt=""
              :style="{
                borderRadius: item.style.type == 'round' ? '10px' : '',
                marginBottom: item.style.imgM + 'px',
              }"
            />
          </div>
          <div class="info2 flex aitems sb" v-if="item.type.value == 2">
            <div
              class=""
              v-for="(i, ii) in item.value"
              v-if="ii < 4"
              :style="{
                width: `calc(100% / ${
                  item.value.length > 4 ? 4 : item.value.length
                } - ${item.style.imgM / 2}px)`,
                height: `${item.type.height}px`,
                overflow: 'hidden',
              }"
            >
              <img
                :src="i.link"
                alt=""
                :style="{
                  borderRadius: item.style.type == 'round' ? '10px' : '',
                  height: '100%',
                }"
              />
            </div>
          </div>
          <div class="info3" v-if="item.type.value == 3">
            <div
              class=""
              v-for="i in item.value"
              :style="{
                height: `${item.type.height}px`,
                marginRight: `${item.style.imgM}px`,
              }"
            >
              <img
                :src="i.link"
                alt=""
                :style="{
                  borderRadius: item.style.type == 'round' ? '10px' : '',
                  height: '100%',
                }"
              />
            </div>
          </div>
        </div>
        <div
          class="block6"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '轮播图'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div class="info1" v-if="item.value.length == 0">
            <img src="@/assets/zanwutupian.png" alt="" />
          </div>
          <div class="info1" v-if="item.value.length !== 0">
            <el-carousel
              @change="bannerChange($event, index)"
              :initial-index="item.initialIndex"
              indicator-position="none"
              :height="`${item.height}px`"
              :interval="
                item.style.second == '3000'
                  ? 3000
                  : item.style.second == '5000'
                  ? 5000
                  : 3000
              "
            >
              <el-carousel-item v-for="i in item.value">
                <img
                  :src="i.link"
                  alt=""
                  :style="{
                    borderRadius: item.style.type == 'round' ? '10px' : '',
                    objectFit: cover,
                  }"
                />
              </el-carousel-item>
            </el-carousel>
            <div class="dots flex aitems jcenter" v-if="item.style.types == 1">
              <div
                :class="
                  item.initialIndex === indexs
                    ? 'dotsActive dotsItem'
                    : 'dotsItem'
                "
                :style="{
                  background: `${
                    item.style.dotsType == 2 && item.initialIndex === indexs
                      ? item.style.zdyColor
                      : ''
                  }`,
                }"
                v-for="(items, indexs) in item.value"
              ></div>
            </div>
            <div
              class="dots2 flex aitems jcenter"
              :style="{
                background: `${
                  item.style.dotsType == 2 ? item.style.zdyColor : ''
                }`,
              }"
              v-if="item.style.types == 2"
            >
              <div class="dotsItem">
                {{ item.initialIndex + 1 + "/" + item.value.length }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="block7"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '分割占位'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div
            v-if="item.type == 1"
            class="info1"
            :style="{
              padding: `${item.style.borderP / 2}px 0px`,
              background: `${item.style.borderBg}`,
            }"
          ></div>
          <div
            v-if="item.type == 2"
            class="info1"
            :style="{
              padding: `${item.style.borderP / 2}px 0px`,
              background: `${item.style.borderBg}`,
            }"
          >
            <div
              class="border"
              :style="{
                borderTop: `1px ${
                  item.borderStyle == 1
                    ? 'solid'
                    : item.borderStyle == 2
                    ? 'dashed'
                    : item.borderStyle == 3
                    ? 'dotted'
                    : ''
                } ${item.style.borderColor}`,
                // height: '1px',
              }"
            ></div>
          </div>
        </div>
        <div
          class="block8"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '图文导航'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            background: `${item.bgColor}`,
            borderRadius: `${item.blockRadius}px`,
          }"
        >
          <div class="mask"></div>
          <div
            v-if="item.value.length == 0 && item.type == 1"
            class="info1 flex aitems sa"
          >
            <div v-for="(items, index) in 4" class="navlist">
              <img
                src="@/assets/zanwutupian.png"
                alt=""
                :style="{
                  width: `${item.size}px`,
                  height: `${item.size}px`,
                  borderRadius: `${item.radius}px`,
                }"
              />
              <div
                class="tip1"
                :style="{
                  color: `${item.color}`,
                }"
              >
                图文导航{{ index + 1 }}
              </div>
            </div>
          </div>
          <div
            v-if="item.value.length == 0 && item.type == 2"
            class="info1 flex aitems wrap sa"
            v-for="items in 2"
          >
            <div
              v-for="(items, index) in item.flex == 1
                ? 3
                : item.flex == 2
                ? 4
                : 5"
              class="navlist"
            >
              <img
                src="@/assets/zanwutupian.png"
                alt=""
                :style="{
                  width: `${item.size}px`,
                  height: `${item.size}px`,
                  borderRadius: `${item.radius}px`,
                }"
              />
              <div
                class="tip1"
                :style="{
                  color: `${item.color}`,
                }"
              >
                图文导航
              </div>
            </div>
          </div>
          <div
            v-if="item.value.length !== 0 && item.type == 1"
            class="info1 flex sa"
          >
            <div
              v-for="(items, index) in item.value"
              class="navlist"
              v-if="item.value.length > 5 ? index < 4 : true"
            >
              <img
                :src="items.link"
                alt=""
                :style="{
                  width: `${item.size}px`,
                  height: `${item.size}px`,
                  borderRadius: `${item.radius}px`,
                }"
              />
              <div
                class="tip1"
                :style="{
                  color: `${item.color}`,
                }"
              >
                {{ items.name }}
              </div>
            </div>
          </div>
          <div
            v-if="item.value.length !== 0 && item.type == 2"
            class="info1 flex sa"
            v-for="(items, index) in item.chunks"
          >
            <div v-for="(itemss, index) in items" class="navlist">
              <img
                :src="itemss.link"
                alt=""
                :style="{
                  width: `${item.size}px`,
                  height: `${item.size}px`,
                  borderRadius: `${item.radius}px`,
                }"
              />
              <div
                class="tip1"
                :style="{
                  color: `${item.color}`,
                }"
              >
                {{ itemss.name }}
              </div>
            </div>

            <div
              v-for="(itemss, index) in item.flex == 1
                ? Number(3 - items.length)
                : item.flex == 2
                ? Number(4 - items.length)
                : Number(5 - items.length)"
              class="navlist"
            ></div>
          </div>
        </div>
        <div
          class="block9"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '富文本'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            background: `${item.style.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div class="info1" v-html="item.content"></div>
        </div>
        <div
          class="block10"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '视频组件'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            background: `${item.style.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div class="info1" v-if="item.value.length == 0">
            <video
              v-if="!item.control"
              :controls="false"
              :muted="item.mute"
              src="http://test.com/1.mp4"
              poster="https://cdn2.weimob.com/saas/@assets/saas-fe-party-web-stc/images/ec/video_poster.svg"
              :style="{
                borderRadius: `${item.radius}px`,
                height: `${item.size == 2 ? item.height + 'px' : 'auto'}`,
              }"
            ></video>
            <video
              v-if="item.control"
              :controls="true"
              :muted="item.mute"
              src="http://test.com/1.mp4"
              poster="https://cdn2.weimob.com/saas/@assets/saas-fe-party-web-stc/images/ec/video_poster.svg"
              :style="{
                borderRadius: `${item.radius}px`,
                height: `${item.size == 2 ? item.height : 'auto'}px`,
              }"
            ></video>
          </div>
          <div class="info1" v-if="item.value.length !== 0">
            <video
              v-for="(items, indexs) in item.value"
              v-if="!item.control && indexs == 0"
              :controls="false"
              :muted="item.mute"
              :src="items.link"
              :style="{
                borderRadius: `${item.radius}px`,
                height: `${item.size == 2 ? item.height + 'px' : 'auto'}`,
              }"
            ></video>
            <video
              v-for="(items, indexs) in item.value"
              v-if="item.control && indexs == 0"
              :controls="true"
              :muted="item.mute"
              :src="items.link"
              :style="{
                borderRadius: `${item.radius}px`,
                height: `${item.size == 2 ? item.height : 'auto'}px`,
              }"
            ></video>
            <div class="dots flex aitems jcenter" v-if="item.value.length > 1">
              <div
                :class="indexs == 0 ? 'dotsItem dotsActive' : 'dotsItem'"
                v-for="(items, indexs) in item.value"
              ></div>
            </div>
          </div>
        </div>
        <div
          class="block11"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '选项卡'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div class="info1">
            <div
              class="tabsbox"
              v-for="(items, indexs, key) in item.value"
              :key="key"
            >
              <div class="flex aitems jcenter" style="height: 100%">
                <div
                  class="name"
                  :style="{
                    color: `${item.color}`,
                    background: `${item.bgFilled == 1 ? item.filledColor : ''}`,
                    borderRadius: `${item.radius}px`,
                  }"
                >
                  {{ items.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block12"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '商品分组'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div class="info1 flex aitems">
            <div
              v-for="(items, indexs, key) in item.value"
              :key="key"
              class="flex aitems"
            >
              <div class="tabsbox">
                <div class="flex aitems jcenter" style="height: 100%">
                  <div
                    class="name"
                    :style="{
                      color: `${item.color}`,
                      background: `${
                        item.bgFilled == 1 ? item.filledColor : ''
                      }`,
                      borderRadius: `${item.radius}px`,
                    }"
                  >
                    {{ items.title }}
                  </div>
                </div>
              </div>
              <div
                class="borders"
                v-if="indexs < item.value.length - 1 && item.border"
              ></div>
            </div>
          </div>
          <!-- <div class="info2"></div> -->
        </div>
        <div
          class="block13"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '店铺街'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            borderRadius: `${item.radius}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info2"
            :style="{
              background: `linear-gradient(180deg, ${item.titleBgColor1} 0%, ${item.titleBgColor2} 100%)`,
            }"
          ></div>
          <div class="info1">
            <div class="titlebox flex aitems sb">
              <div class="title" :style="{ color: `${item.titleColor}` }">
                {{ item.title }}
              </div>
              <div
                class="more flex aitems"
                :style="{ color: `${item.moreColor}` }"
                v-if="item.moreShow == 1"
              >
                <span>{{ item.more }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>

            <div class="sellerbox">
              <div
                class="sellerList"
                v-for="q in item.value.length > 0 ? item.value : 3"
              >
                <div
                  v-if="q.backImg"
                  :style="{
                    backgroundImage: `linear-gradient(180deg,transparent,#fff),url(${q.backImg})`,
                  }"
                  class="filter"
                >
                  <div class="gaosi-content"></div>
                </div>
                <!-- <div class="yinying"></div> -->
                <div class="sellerinfo1 flex aitems">
                  <img
                    class="sellerLogo"
                    :src="q.logo ? q.logo : require('@/assets/zanwutupian.png')"
                    alt=""
                  />
                  <div class="sellerNameBox">
                    <div class="sellerName">
                      {{ q.name ? q.name : "店铺名称" }}
                    </div>
                  </div>
                </div>
                <div
                  class="sellerinfo2"
                  :style="{
                    color: `${item.btnColor}`,
                    background: `${item.btnBgColor}`,
                  }"
                >
                  {{ item.btn }}
                </div>
                <div class="sellerinfo3 flex aitems sb">
                  <div v-for="item in 3" class="goodslist">
                    <div class="goodsinfo1">
                      <img
                        src="@/assets/zanwutupian.png"
                        class="goodsimg"
                        alt=""
                      />
                      <div class="goodsprice">￥1999</div>
                    </div>
                    <div class="goodsinfo2">商品名称</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block14"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '平台公告'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            borderRadius: `${item.radius}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div class="info1 flex aitems sb">
            <div class="left flex aitems">
              <div
                v-if="item.iconShow"
                class="icon flex aitems jcenter"
                :style="{
                  background: `${item.iconBgColor}`,
                  borderRadius: `${item.iconRadius}px`,
                }"
              >
                <img :src="item.icon" class="icon" alt="" />
              </div>
              <el-carousel
                class="swiper"
                :autoplay="true"
                direction="vertical"
                indicator-position="none"
                :height="`${item.height}px`"
                :interval="`${item.speed * 1000}`"
              >
                <el-carousel-item v-for="i in item.value">
                  <div class="titles">{{ i.title }}</div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div
              class="right flex aitems"
              :style="{ color: `${item.moreColor}` }"
              v-if="item.moreShow == 1"
            >
              <span>{{ item.more }}</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div
          class="block15"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '优惠券'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            borderRadius: `${item.radius}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div class="info1">
            <div
              v-for="q in 2"
              class="list flex aitems"
              :style="{
                background: `${item.bgColor2}`,
              }"
            >
              <div class="left">
                <div class="price">
                  <span
                    class="unit"
                    :style="{
                      color: `${item.colorType == 2 ? item.textColor : ''}`,
                    }"
                    >￥</span
                  >
                  <span
                    class="num"
                    :style="{
                      color: `${item.colorType == 2 ? item.textColor : ''}`,
                    }"
                    >100</span
                  >
                </div>
                <div
                  class="price1"
                  :style="{
                    color: `${item.colorType == 2 ? item.textColor : ''}`,
                  }"
                >
                  满xx元使用
                </div>
                <div
                  class="label"
                  :style="{
                    color: `${item.colorType == 2 ? item.color : ''}`,
                    border: `1px solid ${
                      item.colorType == 2 ? item.color : ''
                    }`,
                    background: `${
                      item.colorType == 2 ? hexToRgb(item.color, '.1') : ''
                    }`,
                  }"
                >
                  xx券
                </div>
              </div>
              <div class="border"></div>
              <div class="right flex aitems sb">
                <div class="couponinfo">
                  <div
                    class="name"
                    :style="{
                      color: `${item.colorType == 2 ? item.textColor : ''}`,
                    }"
                  >
                    xx优惠券
                  </div>
                  <div
                    class="time"
                    :style="{
                      color: `${item.colorType == 2 ? item.textColor : ''}`,
                    }"
                  >
                    有效期至 yyyy-mm-dd
                  </div>
                  <div
                    class="log flex aitems"
                    :style="{
                      color: `${item.colorType == 2 ? item.textColor : ''}`,
                    }"
                  >
                    <i class="el-icon-search"></i>
                    <span>查看使用说明</span>
                  </div>
                </div>
                <div
                  class="couponbtn"
                  :style="{
                    background: `${item.colorType == 2 ? item.color : ''}`,
                  }"
                >
                  领取
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block16"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '文章'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div class="info1">
            <div
              class="list1"
              v-for="q in item.value.length == 0 ? 2 : item.value"
              v-if="item.type == 1"
              :style="{
                borderRadius: `${item.radius}px`,
                border: `${item.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
                boxShadow: `${item.carStyle == 2 ? 'none' : ''}`,
              }"
            >
              <div class="img">
                <img
                  :src="
                    q.img
                      ? q.img.split(',')[0]
                      : require('@/assets/zanwutupian1.png')
                  "
                  class=""
                  alt=""
                />
                <div class="lable flex aitems">
                  <div v-if="item.label">
                    {{ q.categoryName ? q.categoryName : "分类一" }}
                  </div>
                </div>
              </div>
              <div class="listinfo">
                <div class="title">
                  {{ q.title ? q.title : "这是种草笔记标题" }}
                </div>
                <div class="listinfo1 flex aitems sb">
                  <div class="left flex aitems">
                    <img
                      :src="
                        q.userAvatar
                          ? q.userAvatar
                          : require('@/assets/zanwutupian1.png')
                      "
                      class="touxaing"
                      alt=""
                    />
                    <div class="name">
                      {{ q.userNickName ? q.userNickName : "作者名称" }}
                    </div>
                  </div>
                  <div class="right">
                    <div class="zan flex aitems" v-if="item.zan">
                      <img src="@/assets/zan.png" class="" alt="" />
                      <div class="num">{{ q.likeNum ? q.likeNum : 999 }}</div>
                    </div>
                    <!-- <div class="view">
                      <img src="@/assets/zan.png" class="" alt="" />
                      <div class="num">999</div>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <div
              class="list2 flex aitems sb"
              v-for="q in item.value.length == 0 ? 2 : item.value"
              v-if="item.type == 2"
              :style="{
                borderRadius: `${item.radius}px`,
                border: `${item.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
                boxShadow: `${item.carStyle == 2 ? 'none' : ''}`,
              }"
            >
              <div class="listinfo">
                <div class="title">
                  {{ q.title ? q.title : "这是种草笔记标题" }}
                </div>
                <div class="lable flex aitems">
                  <div v-if="item.label">
                    {{ q.categoryName ? q.categoryName : "分类一" }}
                  </div>
                </div>
                <div class="listinfo1 flex aitems sb">
                  <div class="left flex aitems">
                    <img
                      :src="
                        q.userAvatar
                          ? q.userAvatar
                          : require('@/assets/zanwutupian1.png')
                      "
                      class="touxaing"
                      alt=""
                    />
                    <div class="name">
                      {{ q.userNickName ? q.userNickName : "作者名称" }}
                    </div>
                  </div>
                  <div class="right">
                    <div class="zan flex aitems" v-if="item.zan">
                      <img src="@/assets/zan.png" class="" alt="" />
                      <div class="num">{{ q.likeNum ? q.likeNum : 999 }}</div>
                    </div>
                    <!-- <div class="view">
                      <img src="@/assets/zan.png" class="" alt="" />
                      <div class="num">999</div>
                    </div> -->
                  </div>
                </div>
              </div>
              <div class="img">
                <img
                  :src="
                    q.img
                      ? q.img.split(',')[0]
                      : require('@/assets/zanwutupian1.png')
                  "
                  class=""
                  alt=""
                />
                <!-- <div class="lable flex aitems" v-if="item.label">
                  <div>分类一</div>
                  <div>分类二</div>
                </div> -->
              </div>
            </div>
            <div class="flex sb aitems list3box">
              <div
                class="list3"
                v-for="q in item.value.length == 0 ? 2 : item.value"
                v-if="item.type == 3"
                :style="{
                  borderRadius: `${item.radius}px`,
                  border: `${
                    item.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'
                  }`,
                  boxShadow: `${item.carStyle == 2 ? 'none' : ''}`,
                }"
              >
                <div class="img">
                  <img
                    :src="
                      q.img
                        ? q.img.split(',')[0]
                        : require('@/assets/zanwutupian1.png')
                    "
                    class=""
                    alt=""
                  />
                  <div class="lable flex aitems">
                    <div v-if="item.label">
                      {{ q.categoryName ? q.categoryName : "分类一" }}
                    </div>
                  </div>
                </div>
                <div class="listinfo">
                  <div class="title">
                    {{ q.title ? q.title : "这是种草笔记标题" }}
                  </div>
                  <div class="listinfo1 flex aitems sb">
                    <div class="left flex aitems">
                      <img
                        :src="
                          q.userAvatar
                            ? q.userAvatar
                            : require('@/assets/zanwutupian1.png')
                        "
                        class="touxaing"
                        alt=""
                      />
                      <div class="name">
                        {{ q.userNickName ? q.userNickName : "作者名称" }}
                      </div>
                    </div>
                    <div class="right">
                      <div class="zan flex aitems" v-if="item.zan">
                        <img src="@/assets/zan.png" class="" alt="" />
                        <div class="num">{{ q.likeNum ? q.likeNum : 999 }}</div>
                      </div>
                      <!-- <div class="view">
                      <img src="@/assets/zan.png" class="" alt="" />
                      <div class="num">999</div>
                    </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="more flex aitems jcenter" v-if="item.more">
              <div class="flex aitems">
                <div>查看更多</div>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block17"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '秒杀'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            borderRadius: `${item.radius}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info2"
            :style="{
              background: `linear-gradient(180deg, ${item.titleBgColor1} 0%, ${item.titleBgColor2} 100%)`,
            }"
          ></div>
          <div class="info1">
            <div class="titlebox flex aitems sb">
              <div
                class="title flex aitems"
                :style="{ color: `${item.titleColor}` }"
              >
                <div>
                  {{
                    item.value.length == 0 ? "秒杀活动" : item.value[0].title
                  }}
                </div>
                <div class="timebox flex aitems" v-if="item.iskill">
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                </div>
              </div>
              <div
                class="more flex aitems"
                :style="{ color: `${item.titleColor}` }"
                v-if="item.moreShow == 1"
              >
                <span>{{ item.more }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>

            <div class="sellerbox">
              <div class="sellerList" v-for="q in 2">
                <div class="sellerinfo1 flex aitems">
                  <img
                    class="sellerLogo"
                    :src="require('@/assets/zanwutupian.png')"
                    alt=""
                  />
                  <div class="sellerNameBox">
                    <div class="sellerName ellipsis1">商品名称</div>
                    <div
                      class="pricebox flex aitems"
                      :style="{ color: `${item.color}` }"
                    >
                      <div class="unit">￥</div>
                      <div class="num">99.99</div>
                    </div>
                    <div
                      class="jindubox flex"
                      :style="{
                        background: `${hexToRgb(item.color, '.1')}`,
                      }"
                    >
                      <div class="left flex aitems">
                        <div class="jindu">
                          <div
                            class="value"
                            :style="{ background: `${item.color}` }"
                          ></div>
                        </div>
                        <div
                          class="shengyu"
                          :style="{ color: `${item.color}` }"
                        >
                          剩余9999
                        </div>
                      </div>
                      <div
                        class="right"
                        :style="{
                          background: `linear-gradient(
                      270deg,
                      ${hexToRgb(item.color, '.6')} 0.96%,
                      ${item.color} 97.01%
                    )`,
                        }"
                      >
                        抢
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block17"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '限时折扣'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            borderRadius: `${item.radius}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info2"
            :style="{
              background: `linear-gradient(180deg, ${item.titleBgColor1} 0%, ${item.titleBgColor2} 100%)`,
            }"
          ></div>
          <div class="info1">
            <div class="titlebox flex aitems sb">
              <div
                class="title flex aitems"
                :style="{ color: `${item.titleColor}` }"
              >
                <div>
                  {{
                    item.value.length == 0
                      ? "限时折扣活动"
                      : item.value[0].title
                  }}
                </div>
                <div class="timebox flex aitems" v-if="item.iskill">
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                </div>
              </div>
              <div
                class="more flex aitems"
                :style="{ color: `${item.titleColor}` }"
                v-if="item.moreShow == 1"
              >
                <span>{{ item.more }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>

            <div class="sellerbox">
              <div class="sellerList" v-for="q in 2">
                <div class="sellerinfo1 flex aitems">
                  <img
                    class="sellerLogo"
                    :src="require('@/assets/zanwutupian.png')"
                    alt=""
                  />
                  <div class="sellerNameBox">
                    <div class="sellerName ellipsis1">商品名称</div>
                    <div
                      class="pricebox flex aitems"
                      :style="{ color: `${item.color}` }"
                    >
                      <div class="unit">￥</div>
                      <div class="num">99.99</div>
                    </div>
                    <div
                      class="jindubox flex"
                      :style="{
                        background: `${hexToRgb(item.color, '.1')}`,
                      }"
                    >
                      <div class="left flex aitems">
                        <div class="jindu">
                          <div
                            class="value"
                            :style="{ background: `${item.color}` }"
                          ></div>
                        </div>
                        <div
                          class="shengyu"
                          :style="{ color: `${item.color}` }"
                        >
                          剩余9999
                        </div>
                      </div>
                      <div
                        class="right"
                        :style="{
                          background: `linear-gradient(
                      270deg,
                      ${hexToRgb(item.color, '.6')} 0.96%,
                      ${item.color} 97.01%
                    )`,
                        }"
                      >
                        抢
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block18"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == 'N元N件'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            borderRadius: `${item.radius}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info2"
            :style="{
              background: `linear-gradient(180deg, ${item.titleBgColor1} 0%, ${item.titleBgColor2} 100%)`,
            }"
          ></div>
          <div class="info1">
            <div class="titlebox flex aitems sb">
              <div
                class="title flex aitems"
                :style="{ color: `${item.titleColor}` }"
              >
                <div>
                  {{
                    item.value.length == 0 ? "N元N件活动" : item.value[0].title
                  }}
                </div>
                <div class="timebox flex aitems" v-if="item.iskill">
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                </div>
              </div>
              <div
                class="more flex aitems"
                :style="{ color: `${item.titleColor}` }"
                v-if="item.moreShow == 1"
              >
                <span>{{ item.more }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>

            <div class="sellerbox">
              <div class="sellerList" v-for="q in 2">
                <div class="sellerinfo1 flex">
                  <img
                    class="sellerLogo"
                    :src="require('@/assets/zanwutupian.png')"
                    alt=""
                  />
                  <div class="sellerNameBox flex sb">
                    <div class="sellerNameBox1">
                      <div class="sellerName ellipsis2">
                        商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
                      </div>
                      <div class="labelbox flex aitems">
                        <div
                          class="label"
                          v-for="b in 2"
                          :style="{
                            color: `${item.color}`,
                            border: `0.5px solid ${item.color}`,
                          }"
                        >
                          TOP1
                        </div>
                      </div>
                      <div class="sale">销量:1348</div>
                    </div>
                    <div class="price flex aitems sb">
                      <div
                        class="pricebox flex aitems"
                        :style="{ color: `${item.color}` }"
                      >
                        <div class="unit">￥</div>
                        <div class="num">99.99</div>
                      </div>
                      <div class="btn" :style="{ background: `${item.color}` }">
                        立即购买
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block18"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '满减活动'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
            marginTop: `${item.style.mTop}px`,
            marginLeft: `${item.style.mLeft}px`,
            marginRight: `${item.style.mRight}px`,
            marginBottom: `${item.style.mBottom}px`,
            borderRadius: `${item.radius}px`,
            background: `${item.bgColor}`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info2"
            :style="{
              background: `linear-gradient(180deg, ${item.titleBgColor1} 0%, ${item.titleBgColor2} 100%)`,
            }"
          ></div>
          <div class="info1">
            <div class="titlebox flex aitems sb">
              <div
                class="title flex aitems"
                :style="{ color: `${item.titleColor}` }"
              >
                <div>
                  {{
                    item.value.length == 0 ? "满减活动" : item.value[0].title
                  }}
                </div>
                <div class="timebox flex aitems" v-if="item.iskill">
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                  <div class="time1" :style="{ color: `${item.color}` }">:</div>
                  <div class="time" :style="{ background: `${item.color}` }">
                    08
                  </div>
                </div>
              </div>
              <div
                class="more flex aitems"
                :style="{ color: `${item.titleColor}` }"
                v-if="item.moreShow == 1"
              >
                <span>{{ item.more }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>

            <div class="sellerbox">
              <div class="sellerList" v-for="q in 2">
                <div class="sellerinfo1 flex">
                  <img
                    class="sellerLogo"
                    :src="require('@/assets/zanwutupian.png')"
                    alt=""
                  />
                  <div class="sellerNameBox flex sb">
                    <div class="sellerNameBox1">
                      <div class="sellerName ellipsis2">
                        商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
                      </div>
                      <div class="labelbox flex aitems">
                        <div
                          class="label"
                          v-for="b in 2"
                          :style="{
                            color: `${item.color}`,
                            border: `0.5px solid ${item.color}`,
                          }"
                        >
                          TOP1
                        </div>
                      </div>
                      <div class="sale">销量:1348</div>
                    </div>
                    <div class="price flex aitems sb">
                      <div
                        class="pricebox flex aitems"
                        :style="{ color: `${item.color}` }"
                      >
                        <div class="unit">￥</div>
                        <div class="num">99.99</div>
                      </div>
                      <div class="btn" :style="{ background: `${item.color}` }">
                        立即购买
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="block19"
          :ref="'mobilePhoneRef' + index"
          @click="setPage(item, index)"
          @mousemove="hadnleMouseover(item, index, $event)"
          @mousedown="handlemousedown(item, index, $event)"
          @mouseleave="handleMobilePhoneRefMouseleave(item, index, $event)"
          v-if="item.name == '商品'"
          :style="{
            paddingTop: `${item.style.pTop}px`,
            paddingLeft: `${item.style.pLeft}px`,
            paddingRight: `${item.style.pRight}px`,
            paddingBottom: `${item.style.pBottom}px`,
          }"
        >
          <div class="mask"></div>
          <div
            class="info1"
            :style="{
              marginTop: `${item.style.mTop}px`,
              marginLeft: `${item.style.mLeft}px`,
              marginRight: `${item.style.mRight}px`,
              marginBottom: `${item.style.mBottom}px`,
            }"
          >
            <div
              class="list1"
              v-for="q in item.value.length == 0 ? 2 : item.value"
              v-if="item.type == 1"
              :style="{
                borderRadius: `${item.radius}px`,
                border: `${item.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
                boxShadow: `${item.carStyle == 2 ? 'none' : ''}`,
              }"
            >
              <div class="img">
                <img
                  :src="q.img ? q.img : require('@/assets/zanwutupian1.png')"
                  class=""
                  alt=""
                  :style="{ borderRadius: `${item.imgRadius}px` }"
                />
              </div>
              <div class="listinfo">
                <div class="title ellipsis2">
                  {{
                    q.name
                      ? q.name
                      : "商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称"
                  }}
                </div>
                <div class="labelbox flex aitems">
                  <div class="label" v-for="b in q.tagList" v-if="item.label">
                    {{ b.name }}
                  </div>
                </div>
                <div class="listinfo1 flex aitems sb">
                  <div class="left flex aitems">
                    <div class="unit">￥</div>
                    <div class="price">
                      {{ q.goodsPrice ? q.goodsPrice : "999" }}
                    </div>
                  </div>
                  <div class="right" v-if="item.zan && !q.salesVolumeVirtual">
                    销量:999
                  </div>
                  <div class="right" v-if="item.zan && q.salesVolumeVirtual">
                    销量:{{
                      Number(q.salesVolumeVirtual + q.salesVolume).toFixed(0)
                    }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="list2 flex aitems sb"
              v-for="q in item.value.length == 0 ? 2 : item.value"
              v-if="item.type == 2"
              :style="{
                borderRadius: `${item.radius}px`,
                border: `${item.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
                boxShadow: `${item.carStyle == 2 ? 'none' : ''}`,
              }"
            >
              <div class="sellerbox">
                <div class="sellerList" v-for="s in 1">
                  <div class="sellerinfo1 flex">
                    <img
                      class="sellerLogo"
                      :src="
                        q.img ? q.img : require('@/assets/zanwutupian1.png')
                      "
                      alt=""
                      :style="{ borderRadius: `${item.imgRadius}px` }"
                    />
                    <div class="sellerNameBox flex sb">
                      <div class="sellerNameBox1">
                        <div class="sellerName ellipsis2">
                          商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
                        </div>
                        <div class="labelbox flex aitems">
                          <div
                            class="label"
                            v-if="item.label"
                            v-for="b in q.tagList"
                            :style="{
                              color: `${item.color}`,
                              border: `0.5px solid ${item.color}`,
                            }"
                          >
                            {{ b.name }}
                          </div>
                        </div>
                        <div
                          class="sale"
                          v-if="item.zan && !q.salesVolumeVirtual"
                        >
                          销量:999
                        </div>
                        <div
                          class="sale"
                          v-if="item.zan && q.salesVolumeVirtual"
                        >
                          销量:{{
                            Number(
                              q.salesVolumeVirtual + q.salesVolume
                            ).toFixed(0)
                          }}
                        </div>
                      </div>
                      <div class="price flex aitems sb">
                        <div
                          class="pricebox flex aitems"
                          :style="{ color: `${item.color}` }"
                        >
                          <div class="unit">￥</div>
                          <div class="num">
                            {{ q.goodsPrice ? q.goodsPrice : "999" }}
                          </div>
                        </div>
                        <div
                          class="btn"
                          :style="{ background: `${item.color}` }"
                        >
                          立即购买
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex sb aitems list3box">
              <div
                class="list3"
                v-for="q in item.value.length == 0 ? 2 : item.value"
                v-if="item.type == 3"
                :style="{
                  borderRadius: `${item.radius}px`,
                  border: `${
                    item.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'
                  }`,
                  boxShadow: `${item.carStyle == 2 ? 'none' : ''}`,
                }"
              >
                <div class="img">
                  <img
                    :src="q.img ? q.img : require('@/assets/zanwutupian1.png')"
                    class=""
                    alt=""
                    :style="{ borderRadius: `${item.imgRadius}px` }"
                  />
                </div>
                <div class="listinfo">
                  <div class="title ellipsis2">
                    {{
                      q.name
                        ? q.name
                        : "商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称"
                    }}
                  </div>
                  <div class="labelbox flex aitems">
                    <div class="label" v-for="b in q.tagList" v-if="item.label">
                      {{ b.name }}
                    </div>
                  </div>
                  <div class="listinfo1 flex aitems sb">
                    <div class="left flex aitems">
                      <div class="unit">￥</div>
                      <div class="price">
                        {{ q.goodsPrice ? q.goodsPrice : "999" }}
                      </div>
                    </div>
                    <div class="right" v-if="item.zan && !q.salesVolumeVirtual">
                      销量:999
                    </div>
                    <div class="right" v-if="item.zan && q.salesVolumeVirtual">
                      销量:{{
                        Number(q.salesVolumeVirtual + q.salesVolume).toFixed(0)
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list4box">
              <div
                class="list4"
                v-for="q in item.value.length == 0 ? 4 : item.value"
                v-if="item.type == 4"
                :style="{
                  borderRadius: `${item.radius}px`,
                  border: `${
                    item.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'
                  }`,
                  boxShadow: `${item.carStyle == 2 ? 'none' : ''}`,
                }"
              >
                <div class="img">
                  <img
                    :src="q.img ? q.img : require('@/assets/zanwutupian1.png')"
                    class=""
                    alt=""
                    :style="{ borderRadius: `${item.imgRadius}px` }"
                  />
                </div>
                <div class="listinfo">
                  <div class="title ellipsis2">
                    {{
                      q.name
                        ? q.name
                        : "商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称"
                    }}
                  </div>
                  <div class="labelbox flex aitems">
                    <div class="label" v-for="b in q.tagList" v-if="item.label">
                      {{ b.name }}
                    </div>
                  </div>
                  <div class="listinfo1 flex aitems sb">
                    <div class="left flex aitems">
                      <div class="unit">￥</div>
                      <div class="price">
                        {{ q.goodsPrice ? q.goodsPrice : "999" }}
                      </div>
                    </div>
                    <div class="right" v-if="item.zan && !q.salesVolumeVirtual">
                      销量:999
                    </div>
                    <div class="right" v-if="item.zan && q.salesVolumeVirtual">
                      销量:{{
                        Number(q.salesVolumeVirtual + q.salesVolume).toFixed(0)
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="more flex aitems jcenter" v-if="item.more">
              <div class="flex aitems">
                <div>查看更多</div>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- </transition-group>
      </draggable> -->
      <div style="height: 40px"></div>
    </div>

    <!-- 搜索 end -->

    <!-- 底部栏 -->
    <div
      class="infobox3"
      v-for="(item, index, key) in jsonData"
      :key="key"
      v-if="item.name == 'page'"
      :style="{
        background: `${item.footerbgColor}`,
      }"
    >
      <div class="page_fooot flex aitems">
        <div class="foot_item flex aitems jcenter" v-for="items in item.value">
          <img
            class="icon"
            :src="items.select == 1 ? items.selectIcon : items.icon"
            alt=""
          />
          <div
            class="name"
            :style="{
              color: `${items.select ? item.selectColor : item.footerColor}`,
            }"
          >
            {{ items.name ? items.name : "导航" }}
          </div>
        </div>
      </div>
    </div>

    <!-- <el-dialog
      title="预览二维码"
      v-if="qrCodeShow"
      append-to-body
      :visible.sync="qrCodeShow"
      width="50%"
    >
      <img :src="qrCodeImage" alt="" style="width: 200px; height: 200px" />
    </el-dialog> -->
    <div class="PreviewIbox" v-if="qrCodeShow">
      <div class="content">
        <div class="outPreviewIbox" @click.stop="qrCodeShow = false">
          退出预览
        </div>
        <div class="qrcodebox">
          <div ref="qrcode" style="width: 119px; height: 119px"></div>
        </div>
        <img
          src="https://cdn2.weimob.com/saas/@assets/saas-fe-basis-web-stc/cms/mdesign/previewPhone.png"
        />
        <div class="iframe">
          <iframe
            :src="link"
            width="350px"
            height="692px"
            style="border: none"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import jsonData from "@/mixins/jsonData.js";
import request from "@/router/axios";

import QRCode from "qrcodejs2";

export default {
  components: {},
  mixins: [jsonData],
  data() {
    return {
      qrCodeShow: false,
      link: "",
    };
  },
  watch: {},
  filters: {},
  created() {
    let that = this;
    window.addEventListener("beforeunload", function (e) {
      // 取消默认行为
      e.preventDefault(); // 如果浏览器支持的话，阻止默认行为
      // 设置对话框上的消息（注意：大部分现代浏览器不会显示自定义的消息）
      e.returnValue = "";
      console.log(123123213);
      window.localStorage.setItem(
        "decorationInfo",
        JSON.stringify(that.$store.state.jsonData)
      );
      // this.window.alert("是否保存自定义");
      // 或者执行一些其他的逻辑，比如保存数据等
    });
  },
  mounted() {},
  methods: {
    /* 将十六进制颜色转换为RGB */
    hexToRgb(hex, o) {
      // 移除十六进制颜色中的'#'
      let sanitizedHex = hex.replace("#", "");

      // 解析红、绿、蓝色值
      let r = parseInt(sanitizedHex.substring(0, 2), 16);
      let g = parseInt(sanitizedHex.substring(2, 4), 16);
      let b = parseInt(sanitizedHex.substring(4, 6), 16);

      return `rgb(${r}, ${g}, ${b},${o})`;
    },

    setPage(item, index) {
      console.log(item);

      this.jsonData.map((items) => {
        items.isSetting = false;
      });
      if (item.name == "page") {
        this.jsonData[0].isSetting = true;
      } else {
        this.$set(this.jsonData[index], "isSetting", true);
        this.$store.state.menuIndex = index;
      }
    },

    handleMouseenter(e) {
      console.log("进入屏幕");
      this.$store.state.isEnterMobilePhone = true;

      /**进入屏幕检测无组件 出现线条  start**/
      if (this.$store.state.isDrop) {
        if (this.jsonData.length == 1) {
          this.$refs.borderPon.style.display = "block";
        } else {
          let divHeight =
            this.$refs["mobilePhoneRef" + (this.jsonData.length - 1)][0];
          divHeight.style.borderTop = "";
          divHeight.style.borderBottom = "4px solid #409eff";
        }
      }
      /**进入屏幕检测无组件 出现线条  end**/
    },

    handleMouseleave() {
      console.log("移除屏幕");
      this.$store.state.isEnterMobilePhone = false;
      // this.$store.state.currentExitComPinIndex = null;
      // this.$store.state.enterPonIndex = null;

      this.$refs.borderPon.style.display = "none";
      this.jsonData.map((item, index) => {
        if (index !== 0) {
          // console.log(this.$refs);
          if (this.$refs["mobilePhoneRef" + index].length !== 0) {
            this.$refs["mobilePhoneRef" + index][0].style.borderBottom = "none";
            this.$refs["mobilePhoneRef" + index][0].style.borderTop = "none";
          }
        }
      });
    },

    handlemousedown(item, index, e) {
      e.preventDefault();

      this.$store.state.isEditPon = true; //是否屏幕内组件正在移动位置

      this.$parent.$refs.xybox.innerHTML = item.name;
      var e = e || window.event; //要用event这个对象来获取鼠标的位置
      this.x = e.clientX;
      this.y = e.clientY + 10;
      this.$parent.$refs.xybox.style.left = this.x + "px";
      this.$parent.$refs.xybox.style.top = this.y + "px";
      this.$parent.$refs.xybox.style.display = "block";
      this.$store.state.isDrop = true; //设为true表示可以移动

      this.$store.state.currentCom = item;
      this.$store.state.currentExitComPinIndex = index;

      let divHeight = this.$refs["mobilePhoneRef" + index][0];
      // divHeight.style.display = "none";
    },

    hadnleMouseover(item, index, e) {
      // e.preventDefault();
      if (
        (this.$store.state.isEditPon || this.$store.state.isDrop) &&
        this.$store.state.isEnterMobilePhone
      ) {
        let divHeight = this.$refs["mobilePhoneRef" + index][0];
        // console.log(divHeight);

        // console.log(this.$refs);
        this.jsonData.map((item, index) => {
          if (index !== 0) {
            this.$refs["mobilePhoneRef" + index][0].style.borderBottom = "none";
            this.$refs["mobilePhoneRef" + index][0].style.borderTop = "none";
          }
        });

        this.$store.state.enterPonCom = item;
        this.$store.state.enterPonIndex = index;
        // console.log(e.offsetY);
        // console.log(divHeight.offsetHeight / 2);
        if (e.offsetY > divHeight.offsetHeight / 2) {
          /**插入下面**/
          // console.log("插入下面");
          divHeight.style.borderTop = "none";
          divHeight.style.borderBottom = "4px solid #409eff";

          this.$store.state.enterPonIndexType = "bottom";
        }
        if (e.offsetY <= divHeight.offsetHeight / 2) {
          /**插入上面**/
          // console.log("插入上面");
          divHeight.style.borderBottom = "none";
          divHeight.style.borderTop = "4px solid #409eff";

          this.$store.state.enterPonIndexType = "top";
        }
      }
    },

    /**鼠标离开组件事件  start**/
    handleMobilePhoneRefMouseleave(item, index, e) {
      let divHeight = this.$refs["mobilePhoneRef" + index][0];
      divHeight.style.borderBottom = "none";
      divHeight.style.borderTop = "none";

      /**如果有组件正在移动时，并且在屏幕上**/
      if (this.$store.state.isDrop && this.$store.state.isEnterMobilePhone) {
        divHeight.style.borderBottom = "4px solid #409eff";
      }
    },
    /**鼠标离开组件事件  end**/

    /**鼠标进入标题栏 头部事件  start**/
    block1HandleMouseenter() {
      /**如果有组件，位置是在上面**/
      if (
        this.jsonData.length > 1 &&
        this.$store.state.isDrop &&
        this.$store.state.isEnterMobilePhone
      ) {
        this.jsonData.map((item, index) => {
          if (index !== 0) {
            this.$refs["mobilePhoneRef" + index][0].style.borderBottom = "none";
            this.$refs["mobilePhoneRef" + index][0].style.borderTop = "none";
          }
        });

        let divHeight = this.$refs["mobilePhoneRef1"][0];
        divHeight.style.borderTop = "4px solid #409eff";
        divHeight.style.borderBottom = "";
        this.$store.state.enterPonIndex = 1;
        this.$store.state.enterPonIndexType = "top";
      }
    },
    /**鼠标进入标题栏 头部事件  end**/

    /***删除组件 start**/
    handleDelCom(index) {
      this.jsonData.splice(index, 1);
      if (index == 1) {
        this.jsonData[0].isSetting = true;
      } else {
        this.jsonData.map((item) => {
          item.isSetting = false;
        });
        this.jsonData[index - 1].isSetting = true;
      }
    },
    /***删除组件 end**/

    bannerChange(e, index) {
      // console.log(e, index);
      this.jsonData[index].initialIndex = e;
    },

    save() {
      console.log(this.$route.query.id);
      console.log(this.jsonData);
      console.log("store");
      request({
        url: "/api/server-shop/admin/adorn/submit",
        method: "post",
        data: {
          name: this.$store.state.jsonData[0].title,
          config: JSON.stringify(this.$store.state.jsonData),
          id: this.$route.query.id ? this.$route.query.id : "",
        },
      }).then((res) => {
        console.log(res);
        window.localStorage.removeItem("decorationInfo");
        this.$message.success("保存成功");
      });
    },
    async PreviewI() {
      let id = Date.now();
      request({
        url: "/api/server-shop/admin/adorn/set/data",
        method: "post",
        data: {
          remark: JSON.stringify(this.$store.state.jsonData),
          status: 1,
          ids: id,
        },
      }).then(async (res) => {
        this.qrCodeShow = true;
        setTimeout(() => {
          this.creatQrcode(id);
        }, 1000);
      });
    },

    creatQrcode(id) {
      let link = `${location.origin}/h5/pages/diyPage/preview?id=${id}`;
      this.link = link;
      new QRCode(this.$refs.qrcode, {
        text: link,
        width: 119,
        height: 119,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./mobilePhone.scss";
.borderPon {
  height: 4px;
  background: #409eff;
  display: none;
}

.PreviewIbox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.9) !important;
  .outPreviewIbox {
    position: absolute;
    right: -100px;
    z-index: 99;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px;
    top: 100px;
    cursor: pointer;
  }

  .qrcodebox {
    background: #fff;
    width: 140px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -160px;
    top: 300px;
    border-radius: 8px;
    .qrcode {
    }
  }
  .content {
    position: relative;
    img {
      width: 392px;
    }
    .iframe {
      top: 61px;
      position: absolute;
      border: none;
      left: 21px;
      overflow: hidden;
    }
  }
}
</style>
